<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚轮事件</title>
    <script type="text/javascript" src="../../js/common.js"></script>
    <style>
        #box1 {
            width: 100px;
            height: 100px;
            min-width: 100px;
            min-height: 10px;
            background-color: red;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            let box1 = document.getElementById('box1');
            let index = 100;
            bind(box1,'mousewheel',function (event) {
               event = event || window.event;
               //关闭默认的行为
               //event.preventDefault();
               if (event.wheelDelta < 0 || event.detail > 0){
                   //向下
                   box1.style.height = (index+=10)+'px';
               }else{
                   if (index === 10){
                       box1.style.height = '10px';
                   }else{
                       //向上
                       box1.style.height = (index-=10)+'px';
                   }
               }
            });
        }
    </script>
</head>
<body>
<div id="box1"></div>
</body>
</html>